<template>
    <div id="duty">
        <!-- 查询 -->
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <!-- 工厂 -->
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin: 0 1% 0 2%">
                <el-select @change="GetDepart" v-model="valueFactory" clearable placeholder="工厂">
                    <el-option v-for="item in FactoryOptions" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                </el-select>
            </el-col>
            <!-- 部门 -->
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="">
                <el-select v-model="valueDepart" clearable placeholder="隶属部门">
                    <el-option v-for="item in DepartOptions" :key="item.DepartmentCode" :label="item.DepartmentName" :value="item.DepartmentCode"></el-option>
                </el-select>
            </el-col>
            <!-- 职务职级 111111111111111111111111111111111111111111111 -->
            <el-col :xs="2" :sm="2" :md="2" :lg="2" style="margin:  0 1%;">
                <el-input v-model="Duty" placeholder="职务"></el-input>
            </el-col>
            <el-col :xs="2" :sm="2" :md="2" :lg="2" style="margin:  0 1% 0 0;">
                <el-input v-model="Rank" placeholder="职级" ></el-input>
            </el-col>
            <el-col :xs="8" :sm="8" :md="6" :lg="4" style="text-align: left;">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="add">新增</el-button>
            </el-col>
        </div>
        <!-- 表格 -->
        <el-table  max-height="600" class="table_duty" stripe border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                   style="width: 88%;text-align: center !important;">
            <el-table-column prop="index" sortable width="60"></el-table-column>
            <el-table-column prop="ID" sortable label="唯一标识" v-if="false"></el-table-column>
            <el-table-column prop="FactoryID" sortable label="工厂ID" v-if="false"></el-table-column>
            <el-table-column prop="FactoryName" sortable label="工厂" v-if="false"></el-table-column>
            <el-table-column prop="DepartCode" sortable label="部门代号" v-if="false"></el-table-column>
            <el-table-column prop="DepartmentName" sortable label="部门"></el-table-column>
            <!-- 职务职级 22222222222222222222222222222222222222222222222 -->
            <el-table-column prop="Duty" sortable label="职务"></el-table-column>
            <el-table-column prop="Rank" sortable label="职级"></el-table-column>
            <!--  基本工资 -->
            <el-table-column prop="BasicWageMin" sortable label="基本工资MIN" ></el-table-column>
            <el-table-column prop="BasicWageMax" sortable label="基本工资MAX" ></el-table-column>
            <!-- 考核工资 -->
            <el-table-column prop="AchievementBonus" sortable label="考核工资" ></el-table-column>
            <!-- 岗位津贴 -->
            <el-table-column prop="PostAllowance" sortable label="岗位津贴" ></el-table-column>
            <!-- 全勤奖 -->
            <el-table-column prop="PerfectAttendance" sortable label="全勤奖" ></el-table-column>
            <!-- 操作人员和时间 -->
            <el-table-column prop="OperationUserID" sortable label="操作人员ID" v-if="false"></el-table-column>
            <el-table-column prop="OperationUserName" sortable label="操作人员" ></el-table-column>
            <el-table-column prop="ModifyDate" sortable label="日期" ></el-table-column>
            <!-- 修改和删除 -->
            <el-table-column prop="edit" label="操作" fixed="right">
                <template scope="scope">
                    <el-button
                            size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount" :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage"  layout="total,sizes, prev, pager, next" :total="Total"></el-pagination>
        </div>
        <!-- 新增 -->
        <el-dialog title="新增职务职级" :visible.sync="dialogFormVisible" >
            <el-form :model="form" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <!-- 工厂 部门 -->
                <el-form-item label="工厂"  :label-width="formLabelWidth">
                    <el-select @change="AddGetDepart" v-model="AddvalueFactory" clearable placeholder="隶属工厂">
                        <el-option v-for="item in AddFactoryOptions" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门"  :label-width="formLabelWidth">
                    <el-select v-model="AddvalueDepart" clearable placeholder="隶属部门">
                        <el-option v-for="item in AddDepartOptions" :key="item.DepartmentCode" :label="item.DepartmentName" :value="item.DepartmentCode"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 职务职级 -->
                <el-form-item label="职务" :label-width="formLabelWidth">
                    <el-input v-model="form.Duty" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="职级" :label-width="formLabelWidth">
                    <el-input v-model="form.Rank" auto-complete="off" style="width: 80%" ></el-input>
                </el-form-item>
                <!-- 基本薪资 -->
                <!--<el-form-item label="基本工资MIN" :label-width="formLabelWidth">-->
                    <!--<el-input v-model="form.BasicWageMin" auto-complete="off" style="width: 80%"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="基本工资MAX" :label-width="formLabelWidth">-->
                    <!--<el-input v-model="form.BasicWageMax" auto-complete="off" style="width: 80%" ></el-input>-->
                <!--</el-form-item>-->
                <el-form-item label="基本工资" :label-width="formLabelWidth">
                    <div style="display: flex;text-align: center">
                        <div style="flex: 3;">
                            <el-input v-model="form.BasicWageMin" auto-complete="off" style="width: 90%" ></el-input>
                        </div>
                        <div style="flex: 1;"> —— </div>
                        <div style="flex: 3;">
                            <el-input v-model="form.BasicWageMax" auto-complete="off" style="width: 90%" ></el-input>
                        </div>
                        <div style="flex: 8;"></div>
                    </div>
                </el-form-item>
                <!-- 考核工资 -->
                <el-form-item label="考核工资" :label-width="formLabelWidth">
                    <el-input v-model="form.AchievementBonus" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <!-- 岗位津贴 -->
                <el-form-item label="岗位津贴" :label-width="formLabelWidth">
                    <el-input v-model="form.PostAllowance" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <!-- 全勤奖 -->
                <el-form-item label="全勤奖" :label-width="formLabelWidth">
                    <el-input v-model="form.PerfectAttendance" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog title="修改职务职级" :visible.sync="EditFormVisible" style="">
            <el-form :model="formEdit" style="text-align: left;width: 90%;margin: auto">
                <!-- 工厂 -->
                <el-form-item label="工厂" :label-width="formLabelWidthEdit">
                    <el-select @change="EditGetDepart" v-model="formEdit.FactoryID" clearable placeholder="工厂">
                        <el-option v-for="item in EditFactoryOptions" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 部门 -->
                <el-form-item label="部门" :label-width="formLabelWidthEdit">
                    <el-select v-model="formEdit.DepartCode" clearable placeholder="隶属部门">
                        <el-option v-for="item in EditDepartOptions" :key="item.DepartmentCode" :label="item.DepartmentName" :value="item.DepartmentCode"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 职务职级 -->
                <el-form-item label="职务" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.Duty" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="职级" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.Rank" auto-complete="off" style="width: 80%" ></el-input>
                </el-form-item>
                <el-form-item label="基本工资" :label-width="formLabelWidth">
                    <div style="display: flex;text-align: center">
                        <div style="flex: 3;">
                            <el-input v-model="formEdit.BasicWageMin" auto-complete="off" style="width: 90%" ></el-input>
                        </div>
                        <div style="flex: 1;"> —— </div>
                        <div style="flex: 3;">
                            <el-input v-model="formEdit.BasicWageMax" auto-complete="off" style="width: 90%" ></el-input>
                        </div>
                        <div style="flex: 8;"></div>
                    </div>
                </el-form-item>
                <!-- 考核工资 -->
                <el-form-item label="考核工资" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.AchievementBonus" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <!-- 岗位津贴 -->
                <el-form-item label="岗位津贴" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.PostAllowance" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <!-- 全勤奖 -->
                <el-form-item label="全勤奖" :label-width="formLabelWidth">
                    <el-input v-model="formEdit.PerfectAttendance" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog title="删除职务" :visible.sync="DeleteFormVisible">
            <el-form :model="formDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此职务吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteForm" >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){
            return {
                tableData:[],         //  表格
                //   查询
                Rank:'',       //  职级
                Duty:'',       //  职务
                //  工厂
                FactoryOptions:[],    //  工厂   一加载页面就出现工厂的下拉框
                valueFactory:'',    //  选择的是哪个工厂号
                //  部门
                DepartOptions:[],    //  工厂   一选择工厂就确定有哪些部门
                valueDepart:'',    //  选择的是哪个部门
                //    分页
                PageCount:10 ,     // 每页几条   page-size
                CurrentPage:1,     // 当前是第几页
                Total:0 ,          // 总数
//      新增
                //  工厂
                AddFactoryOptions:[],    //  工厂   一加载页面就出现工厂的下拉框
                AddvalueFactory:'',    //  选择的是哪个工厂号
                //  部门
                AddDepartOptions:[],    //  工厂   一选择工厂就确定有哪些部门
                AddvalueDepart:0,    //  选择的是哪个部门
                //  新增
                dialogFormVisible: false,
                form: {
                    DepartCode:'',
                    Duty:'',
                    Rank:'',
                    BasicWageMin:null,
                    BasicWageMax:null,
                    AchievementBonus:null,
                    PostAllowance:null,
                    PerfectAttendance:null
                },
                formLabelWidth: '120',
//    修改
                //  工厂
                EditFactoryOptions:[],    //  工厂   一加载页面就出现工厂的下拉框
                //  部门
                EditDepartOptions:[],    //  工厂   一选择工厂就确定有哪些部门
                EditFormVisible: false,
                formEdit:{ },
                formLabelWidthEdit:'120',
//    删除
                DeleteFormVisible: false,
                formDelete:{},
                formLabelWidthDelete:'120',
            }
        },
        methods: {
            //    分页
            handleSizeChange(val) {
                this.PageCount = val ;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val ;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            //   一加载页面就应该知道有哪些工厂
            GetFactory(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/Department/GetFactoryInfo" ;
                this.$http.get(url,).then(response => {
                    this.FactoryOptions = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.FactoryOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })
            },
            //  一选择工厂，就知道有哪些部门
            GetDepart(){
                let url = "http://192.168.3.238:8088/Department/GetParentDepartment?FactoryID=" + this.valueFactory ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    console.log("隶属部门 ");
//                    console.log(response.data);
                    if(Code == 200){   // 正常请求到数据
                        this.DepartOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 部门请求失败");
                    console.log(response)
                })
            },
//   职务职级的表格
            selectTable(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/RankDuty/GetRankDuty?DepartCode=" + this.valueDepart + "&Duty=" +
                        this.Duty + "&Rank=" +this.Rank+"&PageCount="+this.PageCount+"&CurrentPage="+ this.CurrentPage;
                console.log("表格")
                console.log(url)
                this.$http.get(url,).then(response=>{
                    this.tableData=[];  //  必须加
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = response.data.Total;
                        for(let i=0;i<response.data.ObjList.length;i++){
                            this.tableData.push(response.data.ObjList[i]);
                            response.data.ObjList[i].index=i+1;
                        }
                    }
                    console.log("职务职级表格")
                    console.log(response.data)
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
//    新增职务职级
            //   一点击新增   就应该知道有哪些工厂
            AddGetFactory(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/Department/GetFactoryInfo" ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.AddFactoryOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })
            },
            //  一选择工厂，就知道有哪些部门
            AddGetDepart(){
                let url = "http://192.168.3.238:8088/Department/GetParentDepartment?FactoryID=" + this.AddvalueFactory ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    console.log("隶属部门 ");
                    if(Code == 200){   // 正常请求到数据
                        this.AddDepartOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 部门请求失败");
                    console.log(response)
                })
            },
            //  新增职务职级
            add() {
                console.log("点击新增按钮 ");
                this.AddGetFactory();
//                this.A();    // 点击新增按钮  将0置为空
                this.dialogFormVisible = true;
            },
            addForm(){    //   post
                let addUrl = "http://192.168.3.238:8088/RankDuty/AddRankDuty";
                let addForm = {
                    "DepartCode":this.AddvalueDepart,   //  部门
                    "Duty":this.form.Duty,
                    "Rank":this.form.Rank,
                    "BasicWageMin":this.form.BasicWageMin,
                    "BasicWageMax":this.form.BasicWageMax,
                    "AchievementBonus":this.form.AchievementBonus,    //  考核工资
                    "PostAllowance":this.form.PostAllowance,    //  岗位津贴
                    "PerfectAttendance":this.form.PerfectAttendance,    //  全勤奖
                    "OperationUser":1
                };
                console.log("addForm ");
//                console.log(addUrl);
//                console.log(addForm);
                let that = this ;
                if(this.form.Duty.length === 0 && this.form.Rank.length === 0 && this.form.DepartCode.length === 0 ){
                    alert("部门、职务、职级不能为空");
                    return 0;
                }else{
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("添加成功");
//                            console.log(response);
                            that.dialogFormVisible = false ;
                            that.selectTable();
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                        });
                }
            },
//   修改职务职级
            //   一加载页面就应该知道有哪些工厂
            EditGetFactory(){    // 校验输入信息正确性 ，不对直接  return
                let url = "http://192.168.3.238:8088/Department/GetFactoryInfo" ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.EditFactoryOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })
            },
            //  一选择工厂，就知道有哪些部门
            EditGetDepart(){
                let url = "http://192.168.3.238:8088/Department/GetParentDepartment?FactoryID=" + this.formEdit.FactoryID ;
                this.$http.get(url,).then(response => {
                    let Code = response.data.Code;
                    console.log("隶属部门");
                    if(Code == 200){   // 正常请求到数据
                        this.EditDepartOptions = response.data.ObjList ;
                        console.log("一选择工厂 有哪些部门")
//                        console.log(response.data)
                    }
                }, response => {
                    console.log(" 部门请求失败");
                    console.log(response)
                })
            },
            //  修改
            handleEdit(index, row) {
                this.EditGetFactory();   //  一点击  编辑  就显示工厂下拉框
                this.EditGetDepart();   //  一点击  编辑  就显示部门下拉框
                this.EditFormVisible = true;
                this.formEdit = row ;
                console.log("点击编辑按钮 ")
//                console.log(this.formEdit)
            },
            EditForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088//RankDuty/UpdateRankDuty";
                let EditForm = {
                    "ID":this.formEdit.ID,
                    "DepartCode":this.formEdit.DepartCode,
                    "Duty":this.formEdit.Duty,
                    "Rank":this.formEdit.Rank,
                    "BasicWageMin":this.formEdit.BasicWageMin,
                    "BasicWageMax":this.formEdit.BasicWageMax,
                    "AchievementBonus":this.formEdit.AchievementBonus,
                    "PostAllowance":this.formEdit.PostAllowance,
                    "PerfectAttendance":this.formEdit.PerfectAttendance,
                    "OperationUser":2
                };
                console.log("修改工站");
//                console.log(EditForm);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditFormVisible = false;
                        that.selectTable();
                        console.log("修改成功");
//                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
//    删除职务职级
            handleDelete(index, row) {
                this.DeleteFormVisible = true ;
                this.formDelete = row ;
            },
            DeleteForm(){
                let DeleteUrl = "http://192.168.3.238:8088/RankDuty/DeleteRankDuty";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "ID":this.formDelete.ID,
                    "OperationUser":2,
                };
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("删除成功")
                        that.DeleteFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            },
        },
        mounted: function () {   //  onload
            this.selectTable();
            this.GetFactory();  //  工厂
        }
    }
</script>

<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }

    #duty {
        height: 100%;
    }
    /* 表头数据居中 */
    .table_duty thead tr th {
        text-align: center;
    }

</style>